<template>
    <div>
        <el-header>
            <headers @fnc="search" :num="num">
            </headers>
        </el-header>
        <el-main style="margin-top:1rem;">
            <el-row>
                <el-col :span="8">
                    <el-image fit="fill" style="width:400px;height:400px;" v-if="commodity.detailPic" :lazy="true"
                        :src="commodity.detailPic"></el-image>
                </el-col>
                <el-col :span="14">
                    <h1>{{commodity.commodityName}}</h1>
                    <p>
                        {{commodity.commodityDescribe}}
                    </p>
                    <h2 style="color:#e85e5e;">￥{{commodity.price}}</h2>
                    <el-input-number v-model="commodity_num" :min="1" :max="1000" label="数量"></el-input-number>
                    <p style="margin-top:60px;">
                        <el-button type="warning" @click="addShoppingcart">加入购物车</el-button>
                        <el-button type="danger" @click="skip_settlement">立即下单</el-button>
                    </p>
                </el-col>
            </el-row>
            <el-row style="margin-top:2rem;">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="详情" name="first">
                        <el-row>
                            <el-col >
                                <mavon-editor :value="commodity.detail" :subfield="false" :defaultOpen="'preview'"
                                    :toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true" />
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="评价" name="second">
                        <el-card>
                            <el-row v-for="item of 10" :key="item" style="margin:30px 0;">
                                <el-col :span="2">用户名</el-col>
                                <el-col :span="20">
                                    <el-row>
                                        <el-col :span="16">
                                            <i class="el-icon-star-on" v-for="item of 5" :key="item"
                                                style="color:#ca141d;font-size:20px;"></i>
                                        </el-col>
                                        <el-col :span="8" style="text-align:right;color:#717171;font-size:12px;">
                                            2019-2-22 17:22:33</el-col>
                                    </el-row>
                                    <el-divider></el-divider>
                                    <el-row style="margin-top:20px;color:#717171;font-size:14px;">
                                        采春风的和煦，夏雨的凉意，秋月的皎洁，冬雪的白皙，点缀倾国倾城的魅力，声名远播的才华横溢，发送给你，请在此评价下方点赞方可接收此厚礼。
                                    </el-row>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </el-main>
    </div>
</template>

<style scoped>
    h1 {
        color: #5d5959;
    }
</style>

<script>
    import headers from '@/components/headers.vue'
    import $ from 'jquery'
    export default {
        data: () => {
            return {
                num: 0,//通过该变量值的变化，触发headers组件更新购物车数量
                activeName: "first",
                commodity_num:0,

                commodity: {},
            }
        },
        components: {
            headers
        },
        methods: {
            search(val) {
                this.$router.push("search?classification=0&keywords=" + val)
            },
            addShoppingcart() {
                let token = localStorage.getItem('token')
                
                if (token!=null) {
                    let userId=this.$store.state.user.id
                    let obj={
                        userId:userId,
                        commodityId:this.commodity.id,
                        num:this.commodity_num
                    }
                    this.$axios.post(this.$store.state.base_url+'/shoppingcart/?token='+token,obj).then(data=>{
                        console.log(data.data)
                        let code=data.data.code
                        if(code=="FAILLURE"){
                            this.$message({
                                message: '身份过期，请重新登陆',
                                type: 'warning'
                            });
                            this.$router.push("login")
                        }else{
                            this.num++//触发
                            this.$message({
                                message: '商品已成功添加到购物车',
                                type: 'success'
                            });
                        }
                    })
                } else {
                    this.$message({
                        message: '请先进行登陆',
                        type: 'warning'
                    });
                    this.$router.push("login")
                }

            },
            skip_settlement(){
                this.$router.push("settlement?from=detail&id="+this.$route.query.id+"&num="+this.commodity_num)
            }
            
        },
        created() {
            let id = this.$route.query.id
            this.$axios.get(this.$store.state.base_url + '/commodity/' + id).then(data => {
                this.commodity = data.data
            })
        },
        updated() {
            $(".v-note-wrapper").css("box-shadow", "").css("min-height", "4rem")
            $(".v-show-content").css("background-color", "").css("text-align", "center")
            $(".v-note-panel img").css("width", "100%")
            $(".v-show-content scroll-style").css("padding", "0") 
        }
    }
</script>